/**
 * @author kobe
 * @date   16/05/31
 */

(function (lf, r) {
    var RC = r.createClass,
        ajax = lf.utils.ajax,
        setTitle = lf.bridgeJs.setTitle,
        imgUrl = lf.finger.imgUrl.finger,
        doAction = lf.bridgeJs.doAction;

    //test
    var InstructionsList = RC({
        render:function(){
            var instructions_list = this.props.info.map(function (info) {
                return(
                    <List info={info} id={info.id}/>
                )

            })
            return(
                <ul className="mui-table-view mui-grid-view">
                    {instructions_list}
                </ul>
            )


        }
    })

    var List = RC({
        componentDidMount:function(){
            var $toDetail = $(r.findDOMNode(this.refs.toDetail));
            $toDetail.on('tap',function(){
                var sendMsg =  'property-instructions-detail.html?id=' + this.props.id;
                // console.log(sendMsg)
                doAction(sendMsg,this.props.info.title);
            }.bind(this));
        },
        render:function () {
            var info = this.props.info;
            return(
                <li className="listLi mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="javascript:;" className="toDetail" ref="toDetail" >
                        <div className="list-ctr">
                            <img className="mui-media-object list-img" src={info.imageUrl} />
                            <div className="mui-media-body title">{info.title}</div>
                        </div>
                    </a>
                </li>
            )
        }
    })



    var Container = RC({
        getInitialState:function(){
            return ({list:[]})
        },
        componentDidMount:function () {

            lf.bridgeJs.getUser(function(userInfo){
                setTitle('物业档案');
                ajax({
                    data:{
                        projectId: userInfo.projectId,
                        page:1,
                        size:50
                    },
                    success: function(data) {
                        //成功
                        if ( data.code == '200' ) {
                            var list = data.dataList;
                            this.setState({list:list});
                            // console.log(list);

                        }
                        else{
                            alert(data.desc);
                        }
                    }.bind(this)
                },lf.finger.api.property.projectNoticeList);
            }.bind(this));
        },
        render: function () {
            return (
                <div className="property-instructions container">
                    <InstructionsList info={this.state.list}/>
                </div>
            )
        }
    });

    r.render(
        <Container />,
        document.getElementById('root'), function () {
            $('#root').css('background','none');
        }
    )

})(liefeng, React);
